* {
    margin: 0;
    padding: 0;
}
/* 整体背景颜色修改 */
body  {
    background: #fff;
}
/* 黑色导航栏的外部盒子 */
.div-black {
    background-color: #000;
}
/* 黑色导航栏的内部盒子 */
nav {
    margin: 0 auto;
    width: 1090px;
    height: 30px;
    background-color: #000000;
}
.w {
    width: 1090px; 
}
/* 左侧的链接和标签设置 */
.nav-black-left{
    display: inline;
    font-size: 12px;
    line-height: 30px;
    color: #999999;
}
.nav-black-left>span {
    margin-right: 25px;
}
.nav-black-left >a{
    margin-right: 30px;
}
/* 黑色导航栏右侧的标签设置 */
.nav-black ul {
    float: right;
}
.nav-black ul>li {
    display: inline-block;
    font-size: 12px;
    line-height: 30px;
    margin-left: 30px;
}
/* 黑色导航栏样式结束 */

/* 第二个盒子样式开始 */
/* 第二个盒子的高和对应的外边距 */
.box {
    height: 80px;
    margin: auto ;
    margin-top: 20px;
}
/* logo盒子的设置 */
div .box-logo {
    float: left;
    width: 330px;
    height: 65px;
}
/* logo的距离大小设置 */
.box-logo img {
    height: 65px;
    line-height: 65px;
    background-size: auto 65px;
}
/* 搜索栏的设置 */
.box-search {
    position: relative;
    float: left;
    width: 479px;
    height: 40px;
    margin-left: 10px;
    margin-right: 80px;
}
/* 搜索框的设置 */
.box-search input {
    float: left;
    width: 410px;
    height: 24px;
    border: 3px solid #ff0e20;
    border-radius: 24px 0 0 24px;
    padding:6px 39px 6px 30px;
}
/* 搜索按钮的设置 */
.box-search button {
    position: absolute;
    left: 460px;
    width: 60px;
    height: 42px;
    border: 0;
    background-color: #ff0e20;
    border-radius: 24px;
}
/* 购物车按钮 */
.box .box-shopping-car button {
    width: 106px;
    height: 40px;
    border: 3px solid #ff0e20;
    border-radius: 24px;
    background-color: #fff;
}

/* 第三个盒子开始了 */
.nav-red {
    width: 1090px;
    height: 40px;
    margin: 0 auto;
}
.nav-red>div {
    display: inline-block;
}
/* 所有分类的设置 */
.nav-red-one {
    float: left;
    width: 164px;
    height: 40px;
    line-height: 40px;
    background-color: #ff0e20;
    text-align: center;
    font-size: 14px;
    color: #ffffff;
}
/* 第三个盒子中首页等字样的设置 */
.nav-red-two ul {
    padding-left: 25px;
}
.nav-red-two ul>li {
    display: inline-block;
    line-height: 40px;
    padding: 0 20px;
}
.nav-red-two ul>li>a{
    font-size: 15px;
    font-weight: 700;
    color: #333333;
}
.nav-red-two ul>li>a:hover {
    color: #ff0e20;
}

/* 整个上方内容框 */
.area-all {
    position: relative;
    width: 100%;
    height: 550px;
}
/* 上方列表栏 */
.top-menu {
    width: 930px;
    height: 57px; 
    list-style: none;
    color: #191e1f;
    position: absolute;
    top: 30px;
    left: 330px;
    border-bottom: 1px solid #ddd; 
}
.top-menu li {
    position: absolute;
    width: 120px;
    height: 47px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;  
   
}
/* 上方列表底部红色横线移动 */
.top-menu>li:nth-child(1) {
    margin: 10px  10px;
}
.top-menu-first:hover {
    border-bottom: 2px  solid  #E31436;
}
.top-menu>li:nth-child(2) {
    margin: 10px  140px;
}
.top-menu>li:nth-child(2):hover {
    border-bottom: 2px  solid  #E31436;
}
.top-menu>li:nth-child(3) {
    margin: 10px  260px;
}
.top-menu>li:nth-child(3):hover {
    border-bottom: 2px  solid  #E31436; 
}
.top-menu>li:nth-child(4) {
    margin: 10px  380px;
}
.top-menu>li:nth-child(4):hover {
    border-bottom: 2px  solid  #E31436; 
}
.top-menu>li:nth-child(5) {
    margin: 10px  500px;
}
.top-menu>li:nth-child(5):hover {
    border-bottom: 2px  solid  #E31436;
} 
/* “个人中心”文字标题修改 */
.menu-title {
    padding-bottom: 20px;
    margin-bottom: 22px;
    font-size: 18px;
    font-weight: bold;
    color: #191e1f;
    border-bottom: 1px solid #ddd;
}
/* 左侧搜索列表栏 */
 .left-area {
     position: absolute;
     top:-10px;
     left:60px;
     width: 160px;
     height: 434px;
     padding:40px  28px ;

} 
.left-menu li {
    width: 120px;
    height: 28px;
    font-size: 14px;
    line-height: 28px;
    list-style: none;
    padding-left: 8px;
    padding-bottom: 8px;
    color: #191e1f;
    text-align: center;
}
.left-menu li>a {
    color: #191e1f;
}
.left-menu>:nth-child(2) {
    font-weight: 700;
    color: #e31436;
    border-left: 1px solid #E31436;
}
.left-menu>:nth-child(4) {
   
    border-bottom: 1px solid  #ddd;
}
.left-menu>:nth-child(8) {
   
    border-bottom: 1px solid  #ddd;
}
.left-menu>:nth-child(10) {
   
    border-bottom: 1px solid  #ddd;
}

/* 文本搜索区域 */
 .search-area {
     position: relative;
     top:110px;
     left:330px;
     width: 900px;
     height: 50px;
     padding-top: 12px;
} 

.search-area #product {
    background: #ffffff;
    padding: 6px;
    border: 1px solid #ddd;
}
.search-area #button {
    background: #f7f7f7f7;
    border: 1px solid #ddd;
}
.search-area .order-time {
    width: 184px;
    height: 30px;
    font-size: 12px;
    display: inline;
   margin-left: 270px;
}
.search-area .order-status {
    width: 184px;
    height: 30px;
    font-size: 12px;
    display: inline;
   margin-right: 0;
}
/* 图片和文字提示区域 */
.image-sprites {
    height: 272px;
    position: relative;
    margin-top: 140px;
    margin-left: 400px;
}
.image-sprites>div {
    height: 20px;
    position: absolute;
    bottom: 150px;
    left: 210px;
    color: #191e1f;
    font-size: 14px;
}


/* “猜你喜欢”和“大家都在买”模块样式调整 */
/* “猜你喜欢”和“大家都在买”模块标题样式调整 */
.buy-writing {
    height: 30px;
    font-weight: 700;
    font-size: 18px;
    padding-left: 75px;
    padding-bottom: 10px;
    margin-bottom: 15px;
    line-height: 28px;
}
.buy-writing>span {
    margin-left: 8px;
    margin-bottom: 8px;
    font-weight: 400px;
    font-size: 14px;
    color: #999;
} 
/* "猜你喜欢"和"大家都在买"模块的图片调整 */
#shore-photo {
    width: 204px;
    height: 204px;
}

.picture-one,.picture-two {
    width: 206px;
    height: 306px;
    float: left;
    margin-left: 15px;
    margin-bottom: 15px;
    border: 1px  solid  #eaeaea;
    font-size: 12px;
    line-height: 1.5;
    background: #fff;
    
}

.buy-picture {
   padding:40px;
}
/* "猜你喜欢"和"大家都在买"图片内的文字描述链接调整 */
.picture-one>p:nth-child(2),.picture-two>p:nth-child(2) {
    width: 204px;
    height: 40px;
    overflow: hidden;
   
}
.picture-one>p:nth-child(2) a,.picture-two>p:nth-child(2) a {
    margin-bottom: 9px;
    padding: 0  15px;
   
    text-decoration: none;
    color: #333333;
    padding:6px;
}
.picture-one>p:nth-child(2) a:hover,.picture-two>p:nth-child(2) a:hover{
    text-decoration: underline;
}
.picture-one>p:nth-child(3) span,.picture-two>p:nth-child(3) span {

    color: #e31436;
    font-size: 16px;
    font-weight: 700;
    padding: 2px;
}
.picture-one>p:nth-child(4) a,.picture-two>p:nth-child(4) a {
    text-decoration: none;
    color: #999;
    padding:5px;

}

/* 给两个图片区域高度，支撑父元素.picture-one  .picture-two */
.picture-all {
    height: 350px;
    margin-left: 60px;
}


/* 正、低、退、邮 文字显示区域  */
.guarantee {
    width: 1100px;
    height: 100px;
    margin: 0  auto;
    border-top: 1px solid  #999999;
    border-bottom: 1px  solid  #999999;
    padding-top: 50px;
}
.guarantee-area {
    width: 1100px;
    height: 48px;
    padding: 49  0;
}
.guarantee-area>ul {
    width: 1100px;
    height: 48px;
    list-style: none;
}
.guarantee-list li {
    width: 233px;
    height: 48px;
    float: left;
    margin-left: 42px;
    color:  #191e1f;

}
.guarantee-list li:after {
    content: '';
    clear: both;
    display: block;
}
.guarantee-list li>div {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border:2px solid #d6d6d6;
    text-align: center;
    line-height: 44px;
    font-size: 20px;
    font-weight: 700;
    float: left;
}
.guarantee-list li>div:after {
    content: '';
    clear: both;
    display: block;
}
.guarantee-list li>span:nth-child(2) {
    float: left;
    font-size: 18px;
    font-weight: 700;
    color: #333333;
    margin-left: 8px;
    margin-bottom: 5px;
}
.guarantee-list li>span:nth-child(2) :after {
    content: '';
    clear: both;
    display: block;
}
.guarantee-list li>span:nth-child(3) {
    float: left;
    font-size: 14px;
    color: #333333;
    margin-left: 8px;
    margin-bottom: 5px;
}
.guarantee-list li>span:nth-child(3):after {
        content: '';
        clear: both;
        display: block;
}
 /* 考拉海购下方新手指南  */
 .guide {
     width: 1100px;
     margin: auto;
 }
 .guide-area {
     padding: 45px  0  90px;
 } 
 .guide-list {
     width: 1100px;
     height: 128px;
     list-style: none;
     color:  #191e1f;
 }
 /* 考拉海购新手指南文字描述区域 */
.guide-text {
     width: 80px;
     height: 128px;
     float: left;
     padding: 0 0 0 21px;
     line-height: 29px;
     font-size: 12px;
     text-align: center;
     
 }
 .guide-text:after {
    content: '';
    clear: both;
    display: block;
}
 .guide-text span {
     display: block;
 }
 .guide-text>span:nth-child(1) {
     font-size: 18px;
     font-weight: 500;
 }


/* 左侧考拉海购logo区域 */
.guide-list-first {
    float: left;
    width: 240px;
    height: 128px;
    margin-right:40px ;
}
.guide-list-first:after {
    content: '';
    clear: both;
    display: block;
}
.guide-list-first>span:nth-child(2) {
    font-size: 12px;
    float: left;
    margin-top: 30px;
    margin-left: 21px;
}
.guide-list-first>span:nth-child(2):after {
    content: '';
    clear: both;
    display: block;
}
#koala-logo {
    float: left;
    width: 204px;
    height: 65px;
}
#koala-logo:after {
    content: '';
    clear: both;
    display: block;
}
#scan-logo {
    float: left;
    width: 33px;
    height: 33px;
    margin-top: 21px;
    margin-left: 21px;
}
#scan-logo:after {
    content: '';
    clear: both;
    display: block;
}
/* 右侧手机版考拉海购二维码 */
.guide-list-last {
    float: left;
    width: 108px;
    overflow: auto;
    margin-left: 20px;
    margin-top: 4px;
}
.guide-list-last:after {
    content: '';
    clear: both;
    display: block;
}
.guide-list-last>span:nth-child(1) {
    float: left;
    width: 108px;
    height: 108px;
    /* margin-left: 21px; */
    background-image: url(../images/考拉海购下方新手指南/考拉海购手机下载二维码.png);
}
.guide-list-last>span:nth-child(1):after {
    content: '';
    clear: both;
    display: block;
}
.guide-list-last>span:nth-child(2) {
    width: 108px;
    font-size: 12px;
    float: left;
    text-align: center;
}
.guide-list-last>span:nth-child(2):after {
    content: '';
    clear: both;
    display: block;
}
/* 底部许可证文字描述区域 */

.license-list {
       font-size: 12px;
       color: white;
       text-decoration: none;
       background-color: #191e1f;
       width: 100%;
       height: 153px;
       text-align: center;
       padding: 20px  0;
}
.license-list>div {
    margin: 10px  20px;
}
.license-list div>a {
    margin-left: 20px;
}
#police-shield {
    width: 20px;
    height: 20px;
}
#authentication {
    width: 80px;
    height: 30px;
}
#electronic-license {
    width: 28px;
    height: 30px;
}